<template>
  <div>
    <qa-dialog title="选择" v-model="show" :width="920">
      <el-divider />
      <el-scrollbar max-height="600px">
        <div class="px-[40px] bg-red">
          <div class="grid grid-cols-6 gap-[10px]">
            <div v-for="(name, index) in iconList.icons" :index="index" :key="index"
              @click="emit('iconSelectConfirm', name)"
              class="m-[4px] cursor-pointer flex flex-col items-center justify-center border border-gray-200 rounded-md hover:bg-gray-100 h-[100px] gap-[15px]">


              <el-icon size="30">
                <component :is="name" :index="index"></component>
              </el-icon>
              <div class="text-center w-[100px] text-[12px] truncate">{{ name }}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer flex justify-end">
          <el-button @click="close">关闭</el-button>
        </div>
      </template>
    </qa-dialog>
  </div>
</template>

<script setup lang="ts">
import qaDialog from './qa-dialog.vue';
import * as ElIcons from "@element-plus/icons-vue";

const getIconData = () => {
  let icons = [];
  for (const name in ElIcons) {
    icons.push(name);
  }
  return icons;
};
const iconList = reactive({
  icons: getIconData(),
})

const show = ref(false)
const emit = defineEmits(['iconSelectConfirm'])


const open = () => {
  show.value = true
}

const close = () => {
  show.value = false
}

defineExpose({
  open,
  close
})

</script>

<style scoped></style>
